<!-- 每日歌曲推荐 -->
<template>
    <loading v-if="eveylSongList.length == 0" class="absolute top-2/3 left-1/2 translate-x-[-50%] translate-y-[-50%]">
    </loading>
    <div v-else class="w-full">
        <!-- 标题 -->
        <div class="h-32 rounded-lg flex">
            <div class="flex justify-center items-center">
                <i class="iconfont icon-rili text-[var(--playBg)] font-bold before:text-[80px]"></i>
                <span class="text-[var(--playBg)] font-bold text-2xl absolute top-[5.5rem]">{{
                    new Date().getDate() }}</span>
            </div>
            <div class="flex flex-col justify-center rounded-r ml-2">
                <span class="text-[var(--text)] font-bold tracking-[3px] text-2xl">每日歌曲推荐</span>
                <span class="text-[var(--iconBg)] mt-1 text-xs">根据您的音乐口味生成，每天6:00更新</span>
            </div>
        </div>
        <!-- 菜单栏 -->
        <div class="w-full flex justify-between items-center">
            <div class=" relative">
                <i
                    class="iconfont icon-bofang before:text-[60px] text-[var(--playBg)] rounded-full hover:cursor-pointer duration-300"></i>
                <i class="iconfont icon-jiarugedan before:text-2xl text-[var(--playBg)] absolute bottom-[32%] ml-6"></i>
            </div>
            <div class="flex">
                <ul class="flex mr-2 rounded-full bg-[var(--inputBg)]">
                    <li @click="changeList(0)"
                        class="rounded-full px-3 py-2 text-[var(--playBg)] hover:bg-[var(--active)] cursor-pointer duration-300">
                        <span class="iconfont icon-liebiao before:text-2xl"></span>
                    </li>
                    <li @click="changeList(25)"
                        class="rounded-full px-3 py-2 text-[var(--playBg)] hover:bg-[var(--active)] cursor-pointer duration-300">
                        <span class="iconfont icon-shuanglieliebiao before:text-2xl"></span>
                    </li>
                    <li @click="changeList(30)"
                        class="rounded-full px-3 py-2 text-[var(--playBg)] hover:bg-[var(--active)] cursor-pointer duration-300">
                        <span class="iconfont icon-daliebiao before:text-2xl"></span>
                    </li>
                </ul>
                <div
                    class="flex items-center border border-[var(--playBg)] hover:cursor-pointer hover:bg-[var(--playBg)] duration-300 hover:border-transparent hover:text-[--contentBg] text-[var(--playBg)] rounded-full px-3">
                    <i class="iconfont icon-shoucang before:text-2xl mr-1"></i>
                    <span>收藏全部</span>
                </div>
            </div>
        </div>
        <SongList ref="childComp" :songList="eveylSongList" :slider="false" @changeList="changeList" />
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { useStore } from '@renderer/store/index'
import { storeToRefs } from 'pinia'
const { eveylSong } = useStore()
const { eveylSongList } = storeToRefs(eveylSong)
const childComp = ref()
onMounted(() => {
    getEveryMusic()
})
// 改变li样式
const changeList = (value: number) => {
    childComp.value.changeList(value)
}
const getEveryMusic = async () => {
    if (eveylSongList.value.length == 0) {
        await eveylSong.getEveylSongList()
    } else {
        return
    }

}
</script>